<template>
  <div class="main">
    <Header />
    <div class="body">
      <div class="left container_vert">
        <Box class="left_1" :show-header="false">
          <General :data="refNumbers" />
        </Box>
        <Box class="left_2" title="路口概况">
          <Table :columns="crossingData.columns" :table-data="crossingData.tableData"> </Table>
        </Box>
        <Box class="left_3" title="交通流量监测">
          <MultiLineChart :data="trafficVolumeStats.data" :legend="trafficVolumeStats.legend" :color-array="trafficVolumeStats.colorArray" :bar-width="trafficAccidentStats.barWidth" />
        </Box>
      </div>
      <div class="middle container_vert">
        <div class="middle_1">
          <TotalCar title="累计车流总量" :number="carInfo.total"> </TotalCar>
          <NetworkCar title="智能网联车辆" :number="carInfo.intelligent"> </NetworkCar>
        </div>
        <Box class="middle_2" :show-header="false">
          <!-- <China/> -->
          <img src="@/assets/images/map/map.png" @click="onMapClick"/>
        </Box>
        <Box class="middle_3" title="交通事故监测">
          <MultiBarChart :data="trafficAccidentStats.data" :legend="trafficAccidentStats.legend" :color-array="trafficAccidentStats.colorArray" :bar-width="trafficAccidentStats.barWidth" />
        </Box>
      </div>
      <div class="right container_vert">
        <Box class="right_1" title="重点路口态势监控">
          <Table :columns="crossingStressData.columns" :table-data="crossingStressData.tableData"> </Table>
        </Box>
        <Box class="right_2" title="重点干线态势监控">
          <Table :columns="drylineStressData.columns" :table-data="drylineStressData.tableData"> </Table>
        </Box>
      </div>
    </div>
    <div v-show="isAreaMapShow" class="mask" @click="isAreaMapShow = false">
      <Box class="area_map" :show-header="false" @click.stop>
        <img src="@/assets/images/close.png" @click.stop="isAreaMapShow = false"/>
        <AreaMap></AreaMap>
      </Box>
    </div>
  </div>
</template>

<script setup>
import Header from './header/Header.vue';
import Box from '@/components/Box.vue';
import TotalCar from './body/TotalCar.vue';
import NetworkCar from './body/NetworkCar.vue';
import General from './body/General.vue';
import Table from '@/components/Table.vue';
import AreaMap from './body/AreaMap.vue';
import MultiBarChart from '@/components/MultiBarChart.vue';
import MultiLineChart from '@/components/MultiLineChart.vue';
import { reactive, ref } from 'vue';
import { overview, junctionInfo, vehicleInfo, trafficAccident, trafficVolume, junctionIndex, roadIndex } from '@/api/overview';
import { getYesterdayDateStr } from '@/utils/util';
const yesterdayDate = getYesterdayDateStr();
const isAreaMapShow = ref(false);

const refNumbers = ref([
  {
    value: 0,
    name: '区域云'
  },
  {
    value: 0,
    name: '中心云'
  },
  {
    value: 0,
    name: '边缘云'
  },
  {
    value: 0,
    name: '车辆总数'
  },
  {
    value: 0,
    name: '路测感知系统'
  }
]);
// echarts图形配置
const options = reactive({
  trafficAccidentOption: {},
  trafficFlowOption: {}
});
// 车辆数量信息
const carInfo = reactive({
  total: undefined,
  intelligent: undefined
});
// 路口概况表格信息
const crossingData = reactive({
  tableData: [],
  columns: [
    {
      title: '示范区',
      dataIndex: 'areaName'
    },
    {
      title: '路口总数',
      dataIndex: 'crossingTotal'
    },
    {
      title: '拥堵路口总数',
      dataIndex: 'congestionCrossing'
    },
    {
      title: '报警路口数',
      dataIndex: 'warningNum'
    }
  ]
});
// 交通流量监测
const trafficVolumeStats = reactive({
  data: [],
  legend: [],
  colorArray: undefined
});
// 重点路口态势监控表格信息
const crossingStressData = reactive({
  tableData: [],
  columns: [
    {
      title: '路口',
      dataIndex: 'crossingName'
    },
    {
      title: '平均速度',
      dataIndex: 'avaSpeed'
    },
    {
      title: '拥堵指数',
      dataIndex: 'congestion'
    },
    {
      title: '交通流量',
      dataIndex: 'flow'
    },
    {
      title: '示范区',
      dataIndex: 'areaName'
    }
  ]
});

// 重点干线态势监控表格信息
const drylineStressData = reactive({
  tableData: [],
  columns: [
    {
      title: '干线',
      dataIndex: 'trunkName'
    },
    {
      title: '平均速度',
      dataIndex: 'avaSpeed'
    },
    {
      title: '拥堵指数',
      dataIndex: 'congestion'
    },
    {
      title: '交通流量',
      dataIndex: 'flow'
    },
    {
      title: '示范区',
      dataIndex: 'areaName'
    }
  ]
});

// 交通事故
const trafficAccidentStats = reactive({
  data: [],
  barWidth: 18,
  legend: [],
  colorArray: undefined
});
/** 概览 */
const getOverview = () => {
  overview().then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      refNumbers.value[0].value = data.region;
      refNumbers.value[1].value = data.center;
      refNumbers.value[2].value = data.edge;
      refNumbers.value[3].value = (data.carTotal / 10000).toFixed(0) + '万';
      refNumbers.value[4].value = data.roadside;
    }
  });
};

/** 路口概况 */
const getJunctionInfo = () => {
  junctionInfo({ date: yesterdayDate }).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      crossingData.tableData = data;
    }
  });
};

/** 重点路口态势 */
const getJunctionIndex = () => {
  junctionIndex({ date: yesterdayDate }).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      crossingStressData.tableData = data;
    }
  });
};

/** 重点干线态势 */
const getRoadIndex = () => {
  roadIndex({ date: yesterdayDate }).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      drylineStressData.tableData = data;
    }
  });
};

/** 车辆数量信息 */
const getVehicleInfo = () => {
  vehicleInfo().then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      carInfo.total = data.carTotal;
      carInfo.intelligent = data.intelligentCar;
    }
  });
};
/** 交通流量监测 */
const getTrafficVolume = () => {
  trafficVolume({ date: yesterdayDate }).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      let legend = [];
      let _data = [];
      data.forEach(({ areaName, timePoint, value }) => {
        let index = legend.indexOf(areaName);
        if (index < 0) {
          legend.push(areaName);
          index = legend.length - 1;
        }
        let arr = _data[index];
        if (!arr) {
          arr = [];
          _data[index] = arr;
        }
        arr.push({ name: timePoint, value });
      });
      trafficVolumeStats.data = _data;
      trafficVolumeStats.legend = legend;
    }
  });
};

/**
 * 交通事故监测
 */
const getTrafficAccident = () => {
  trafficAccident({ date: yesterdayDate }).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      let legend = [];
      let _data = [];
      data.forEach(({ areaName, accidentType, value }) => {
        let index = legend.indexOf(areaName);
        if (index < 0) {
          legend.push(areaName);
          index = legend.length - 1;
        }
        let arr = _data[index];
        if (!arr) {
          arr = [];
          _data[index] = arr;
        }
        arr.push({ name: accidentType, value });
      });
      trafficAccidentStats.data = _data;
      trafficAccidentStats.legend = legend;
    }
  });
};

/** 地图点击 */
const onMapClick = () => {
  isAreaMapShow.value = true;
};

getOverview();
getJunctionInfo();
getJunctionIndex();
getRoadIndex();
getVehicleInfo();
getTrafficAccident();
getTrafficVolume();
</script>

<style lang="less" scoped>
.left,
.right {
  width: calc(32% - var(--vMargin) - var(--vMargin));
  bottom: var(--vMargin);
}
.left {
  left: var(--hMargin);
}

.right {
  right: var(--hMargin);
}
.left,
.middle,
.right {
  height: calc(100% - var(--headerHeight) - var(--vMargin) - 0.5rem);
}
.middle {
  width: 36%;
  left: 32%;
  bottom: var(--vMargin);
}

.left_1 {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.14);
}
.left_2 {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.41);
}
.left_3 {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.45);
}
.middle_1 {
  display: flex;
  gap: var(--hMargin);
  justify-content: space-between;
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.12);
}
.middle_1 > div {
  width: 50%;
}
.middle_2 {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.48);
  img {
    height: 100%;
  }
}
.middle_3 {
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.4);
}
.right_1,
.right_2 {
  height: calc((100% - var(--vMargin)) * 0.5);
}

.mask {
  width: 100%;
  height: 100%;
  z-index: 11;
  position: absolute;
  background-color: #02070d96;
}
.area_map {
  width: 70%;
  height: 86%;
  left: 15%;
  top: 7%;
  z-index: 10;
  padding: 0;
  img {
    position: absolute;
    z-index: 9;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    top: 1rem;
    cursor: pointer;
  }
}
</style>
